import React, { useEffect, useMemo } from 'react';
import { Card, Switch } from 'antd';
import { ISession, ITarget } from '@/ts/core';
import orgCtrl from '@/ts/controller';
import './index.less';
import OrgIcons from '@/components/Common/GlobalComps/orgIcons';
import EntityIcon from '@/components/Common/GlobalComps/entityIcon';
interface IProps {
  target: ITarget;
  session: ISession;
  id: string;
}
const defaultActions = [
  { text: '首页', icon: 'homebar/home', bodyType: 'home', status: 1 },
  { text: '工作台', icon: 'homebar/bench', bodyType: 'bench', status: 1 },
  { text: '消息', icon: 'homebar/chat', bodyType: 'chat', status: 1 },
  { text: '待办', icon: 'homebar/work', bodyType: 'work', status: 1 },
  { text: '动态', icon: 'homebar/activity', bodyType: 'activity', status: 1 },
  { text: '文件', icon: 'homebar/store', bodyType: 'store', status: 1 },
  { text: '成员', icon: 'homebar/relation', bodyType: 'relation', status: 1 },
  { text: '智能体', icon: 'homebar/smartAuto', bodyType: 'smart', status: 1 },
];
const WebPage: React.FC<IProps> = ({ target, id }) => {
  const [commons, setCommons] = React.useState<any[]>([]);
  const [actionStatus, setActionStatus] = React.useState<any[]>([]);
  const hasRelationAuth = target.hasRelationAuth();
  useEffect(() => {
    orgCtrl.home.loadCommons(target as any).then((res) => {
      setCommons([...res]);
    });
    target.webSiteProvider.loadConfig().then((res) => {
      setActionStatus([...res]);
    });
  }, [target]);
  // 序号 栏目名称 展示模板 页面模板 备注
  const actionsPages = useMemo(() => {
    return defaultActions.map((item) => {
      const find = actionStatus.find((i) => i.bodyType === item.bodyType);
      if (find) {
        item['status'] = find.status;
      }
      return item;
    });
  }, [actionStatus]);

  const renderPageItem = (item: any) => {
    return (
      <div className="page-item" key={item.bodyType}>
        <OrgIcons size={18} type={item.icon} notAvatar />
        <span className="page-item-text">{item.text}</span>
        <Switch
          className="page-item-switch"
          disabled={!hasRelationAuth}
          key={item.status}
          size="small"
          defaultChecked={item.status == 1}
          onChange={(bool) => handleSwitch(item, bool)}
        />
      </div>
    );
  };
  const renderSystemItem = (item: any) => {
    return (
      <div className="page-item">
        <EntityIcon entity={item.metadata} size={20} disableInfo showName />
      </div>
    );
  };

  const handleSwitch = (item: any, checked: boolean) => {
    target.webSiteProvider.changeCommonTabStatus(item, checked);
  };
  return (
    <Card
      title="页面设置"
      id={id}
      className="setting-card"
      size="small"
      extra={<span>可在下方编辑是否展示</span>}>
      <ul className="page-card">
        <li className="card-title">默认页面</li>
        <li className="card-content">
          {actionsPages.map((item) => renderPageItem(item))}
        </li>
      </ul>
      <ul className="page-card">
        <li className="card-title">常用页面</li>
        <li className="card-content">{commons.map((item) => renderSystemItem(item))}</li>
      </ul>
    </Card>
  );
};

export default WebPage;
